<template>
  <div class="container">
    <el-dialog
      class="dialog"
      title="创建负数结算单"
      :visible.sync="minusDialog.centerDialogVisible"
      center
      width="600px"
      :lock-scroll="true"
      :before-close="hideDialog"
      @open="getData"
    >
      <el-form
        ref="form"
        :model="formData"
        :rules="rules"
        label-width="120px"
        style="margin: 10px; width: auto"
        label-position="left"
      >
        <el-form-item label="供应商：" prop="supplier_id">
          <el-select
            v-model="formData.supplier_id"
            :multiple="false"
            filterable
            remote
            center
            reserve-keyword
            placeholder="请选择供应商"
            :remote-method="insideRemoteMethod"
            :loading="supplierInside.loading"
          >
            <el-option
              v-for="item in supplierInside.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品：" prop="erp_goods_code">
          <el-select
            v-model="formData.erp_goods_code"
            :multiple="false"
            filterable
            remote
            reserve-keyword
            placeholder="请输入商品"
            :remote-method="commodityMethod"
            :loading="commodityInside.loading"
            @change="getcommodity(formData.erp_goods_code)"
          >
            <el-option
              v-for="item in commodityInside.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="结算金额：" prop="amount">
          <el-input-number
            size="small"
            :controls="false"
            v-model="formData.amount"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="箱数：" prop="qty">
          <el-input-number
            size="small"
            :controls="false"
            v-model="formData.qty"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="商品数量：" prop="goods_num">
          <el-input-number
            size="small"
            :controls="false"
            v-model="formData.goods_num"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="商品价格：" prop="goods_price">
          <el-input-number
            size="small"
            :controls="false"
            v-model="formData.goods_price"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="采购人：" prop="buyer_code">
          <el-select
            v-model="formData.buyer_code"
            :multiple="false"
            filterable
            remote
            reserve-keyword
            placeholder="请选择采购员"
            :remote-method="insideProcurement"
            :loading="procurement.loading"
            @change="insidebuyer(formData.buyer_code)"
          >
            <el-option
              v-for="item in procurement.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="配送中心：" prop="rdc_code">
          <el-select
            v-model="formData.rdc_code"
            :multiple="false"
            filterable
            remote
            reserve-keyword
            placeholder="请选择配送中心"
            :remote-method="insideDistribution"
            :loading="distribution.loading"
          >
            <el-option
              v-for="item in distribution.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规格：" prop="spec">
          <el-input
            style="width: 200px"
            v-model="formData.spec"
            placeholder="请输入规格"
          />
        </el-form-item>
        <el-form-item label="备注：" prop="market">
          <el-input
            style="width: 200px"
            type="textarea"
            v-model="formData.market"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="confirm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { selectRdcDataNew } from "@/api/permission/adminlist";
import { supplierList } from "@/api/supplier/supplierList";
import { commodityList } from "@/api/commodity/commodityList";
import { getList } from "@/api/putStorage/putStotageList";
import { addStatement } from "@/api/settlement/settlementList";
export default {
  props: {
    minusDialog: Object
  },
  data() {
    return {
      formData: {
        supplier_id: "",
        amount: 0,
        goods_id: "",
        goods_name: "",
        erp_goods_id: "",
        erp_goods_code: "",
        unit: "",
        goods_num: 0,
        goods_price: 0,
        buyer: "",
        buyer_code: "",
        qty: 0,
        spec: "",
        market: "",
        rdc_code: ""
      },
      supplierInside: {
        innerVisible: false,
        options: [],
        value: "",
        list: [],
        loading: false
      },
      commodityInside: {
        options: [],
        value: "",
        list: [],
        loading: false,
        id: ""
      },
      procurement: {
        options: [],
        value: "",
        list: [],
        loading: false,
        id: ""
      },
      distribution: {
        options: [],
        value: "",
        list: [],
        loading: false,
        id: ""
      },
      rules: {
        supplier_id: [
          { required: true, message: "请选择供应商", trigger: "change" }
        ],
        amount: [
          { required: true, message: "请输入结算金额", trigger: "blur" }
        ],
        erp_goods_code: [
          { required: true, message: "请选择商品", trigger: "change" }
        ],
        goods_num: [
          { required: true, message: "请输入商品数量", trigger: "blur" }
        ],
        goods_price: [
          { required: true, message: "请输入商品价格", trigger: "blur" }
        ],
        buyer_code: [
          { required: true, message: "请选择采购员", trigger: "change" }
        ],
        rdc_code: [
          { required: true, message: "请选择配送中心", trigger: "change" }
        ],
        qty: [{ required: true, message: "请输入箱数", trigger: "blur" }],
        spec: [{ required: true, message: "请输入规格", trigger: "blur" }],
        market: [{ required: true, message: "请输入备注", trigger: "blur" }]
      }
    };
  },
  methods: {
    //关闭dialog
    hideDialog() {
      this.minusDialog.centerDialogVisible = false;
      //   this.$emit("upFormData"); //触发父组件upFormData函数
      this.formData = {
        supplier_id: "",
        amount: 0,
        goods_id: "",
        goods_name: "",
        erp_goods_id: "",
        erp_goods_code: "",
        unit: "",
        goods_num: 0,
        goods_price: 0,
        buyer: "",
        buyer_code: "",
        qty: 0,
        spec: "",
        market: ""
      };
      this.supplierInside = {
        innerVisible: false,
        options: [],
        value: "",
        list: [],
        loading: false
      };
      this.commodityInside = {
        options: [],
        value: "",
        list: [],
        loading: false,
        id: ""
      };
      this.procurement = {
        options: [],
        value: "",
        list: [],
        loading: false,
        id: ""
      };
      this.distribution = {
        options: [],
        value: "",
        list: [],
        loading: false,
        id: ""
      };
    },
    getData() {
      let data = {
        page: 1,
        limit: 50
      };
      //获取供应商列表
      supplierList(data).then(res => {
        this.supplierInside.options = res.data.data.map(item => {
          return { value: `${item.id}`, label: `${item.name}` };
        });
      });
      //获取商品列表
      commodityList(data).then(res => {
        this.commodityInside.options = res.data.data.map(item => {
          return {
            value: `${item.code}`,
            label: `${item.name}`,
            erp_goods_id: `${item.erp_id}`,
            erp_goods_code: `${item.code}`,
            goods_id: `${item.id}`,
            unit: `${item.unit}`
          };
        });
      });
      //采购人
      getList(data).then(res => {
        this.procurement.options = res.data.map(item => {
          return { value: `${item.code}`, label: `${item.name}` };
        });
      });
      let datas = {
        code_or_name:'',
        page: 1,
        limit: 200
      };
      //配送中心
      selectRdcDataNew(datas).then(res => {
        this.distribution.options = res.data.paginate.data.map(item => {
          return {
            value: `${item.d_code}`,
            label: `${item.d_name}`
          };
        });
      });
    },
    // 嵌套搜索供应商数据
    insideRemoteMethod(query) {
      if (query !== "") {
        this.getSupplierList(query);
      } else {
        this.supplierInside.options = [];
      }
    },
    //获取供应商数据
    getSupplierList(query) {
      let data = {
        name: query,
        page: 1,
        limit: 100
      };
      this.supplierInside.loading = true;
      supplierList(data).then(res => {
        this.supplierInside.list = res.data.data.map(item => {
          return { value: `${item.id}`, label: `${item.name}` };
        });
        this.supplierInside.loading = false;
        this.supplierInside.options = this.supplierInside.list.filter(item => {
          return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
        });
      });
    },
    //搜索商品数据
    commodityMethod(query) {
      if (query !== "") {
        this.getCommodityList(query);
      } else {
        this.commodityInside.options = [];
      }
    },
    //获取商品列表
    getCommodityList(query) {
      let data = {
        search: query,
        page: 1,
        limit: 100
      };
      this.commodityInside.loading = true;
      commodityList(data).then(res => {
        this.commodityInside.list = res.data.data.map(item => {
          return {
            value: `${item.code}`,
            label: `${item.name}`,
            erp_goods_id: `${item.erp_id}`,
            erp_goods_code: `${item.code}`,
            goods_id: `${item.id}`,
            unit: `${item.unit}`
          };
        });
        this.commodityInside.loading = false;
        this.commodityInside.options = this.commodityInside.list.filter(
          item => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          }
        );
      });
    },
    //搜索采购员
    insideProcurement(query) {
      if (query !== "") {
        this.getProcurement(query);
      } else {
        this.procurement.options = [];
      }
    },
    //搜索配送中心
    insideDistribution(query) {
      if (query !== "") {
        this.getDistribution(query);
      } else {
        this.procurement.options = [];
      }
    },
    getDistribution(query) {
      let data = {
        code_or_name: query,
        page: 1,
        limit: 200
      };
      this.distribution.loading = true;
      selectRdcDataNew(data).then(res => {
        this.distribution.list = res.data.paginate.data.map(item => {
          return {
            value: `${item.d_code}`,
            label: `${item.d_name}`
          };
        });
        this.distribution.options = this.distribution.list.filter(item => {
          this.distribution.loading = false;
          return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
        });
      });
    },
    //获取采购员列表
    getProcurement(query) {
      let data = {
        key: query
      };
      this.procurement.loading = true;
      getList(data).then(res => {
        this.procurement.list = res.data.map(item => {
          return { value: `${item.code}`, label: `${item.name}` };
        });
        this.procurement.loading = false;
        this.procurement.options = this.procurement.list.filter(item => {
          return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
        });
      });
    },
    //获取商品信息
    getcommodity(code) {
      console.log(this.commodityInside);
      let arr = this.commodityInside.options.filter(res => {
        return res.erp_goods_code == code;
      });
      this.formData.goods_id = arr[0].goods_id;
      this.formData.goods_name = arr[0].label;
      this.formData.erp_goods_id = arr[0].erp_goods_id;
      this.formData.erp_goods_code = arr[0].erp_goods_code;
      this.formData.unit = arr[0].unit;
    },
    //获取采购员信息
    insidebuyer(e) {
      let center = this.procurement.options.filter(res => {
        return res.value == e;
      });
      console.log(center, 66666);
      this.formData.buyer = center[0].label;
    },
    //提交
    confirm(form) {
      // console.log(this.formData)
      // return
      this.$refs["form"].validate(valid => {
        if (valid) {
          let data = {
            supplier_id: this.formData.supplier_id,
            amount: this.formData.amount,
            goods_id: this.formData.goods_id,
            goods_name: this.formData.goods_name,
            erp_goods_id: this.formData.erp_goods_id,
            erp_goods_code: this.formData.erp_goods_code,
            unit: this.formData.unit,
            goods_num: this.formData.goods_num,
            goods_price: this.formData.goods_price,
            buyer: this.formData.buyer,
            buyer_code: this.formData.buyer_code,
            qty: this.formData.qty,
            spec: this.formData.spec,
            rdc_code: this.formData.rdc_code,
            market: this.formData.market
          };
          // console.log(this.formData)
          // return
          addStatement(data)
            .then(res => {
              if (res.code == 0) {
                this.$message({
                  message: res.message || res.msg,
                  type: "success"
                });
                this.$emit("upData");
                this.hideDialog();
              } else {
                this.$message({
                  message: res.message || res.msg,
                  type: "error"
                });
              }
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //取消
    cancel() {
      this.hideDialog();
    }
  }
};
</script>
<style scoped>
.radioList {
  border: 1px solid #dcdfe6;
  min-height: 40px;
  border-radius: 4px;
}
.el-radio-group {
  margin-left: 10px;
}
</style>
